
var Login = Vue.component('Login', {
  template: 
    '<div class="login">' + 
      '<ul  class="face-list" v-show="selectFace">' + 
        '<li v-for="i in 10" @click="changeFace(i)">' + 
          '<img :src="\'m\'+i+\'.gif\'" alt="">' + 
        '</li>' + 
      '</ul>' + 
      '<div class="loginbox">' + 
        '<div>' + 
          '<img class="face-img" :src="faceImg" @click="selectFace=!selectFace">' + 
        '</div>' +
        '<div>' + 
          '<input type="text" v-model="user" class="yourname" placeholder="用户名(字母、数字、中文)">' + 
        '</div>' + 
      '</div>' + 
      '<div class="loginbtn">' + 
        '<a href="javascript:void(0)" @click="loginIn">COME IN</a>' + 
      '</div>' + 
    '</div>',
  data: function () {
    return {
      user: '',
      faceIndex: 1,
      selectFace: false
    }
  },
  computed: {
    faceImg: function () {
      return 'm' + this.faceIndex + '.gif'
    }
  },
  mounted: function () {
    if (sessionStorage.xuChatUser) {
      this.$router.replace('/chat')
    } else {

    }
  },
  methods: {
    loginIn () {
      if (this.user.length < 2 ) {
        return alert('用户名必须大于等于两位')
      }
      if (!/^[\w\u4e00-\u9fa5]+$/.test(this.user)) {
        return alert('用户名含有非法字符')
      }
      this.$http.post('http://localhost:8081/register', {user:this.user, faceImg: this.faceImg}).then((res) =>{
        if (res.data === '1') {
          sessionStorage.xuChatUser = this.user
          this.$router.replace('chat')
        } else {
          alert('用户创建失败，请修改用户名后再试！')
        }
      })
    },
    changeFace (i) {
      this.faceIndex = i;
      this.selectFace = false
    }
  }
})